<template>
    <div>
        <Button type="primary" style="margin-bottom:10px;" @click="addbanner(1)">增加</Button>
        <Table border :columns="columns12" :data="data6" >
            <template slot-scope="{ row,column,index }" slot="action">
                <Button type="primary" size="small" style="margin-right: 5px" @click="show(row,column,index )">修改</Button>
                <Button type="error" size="small" @click="remove(row,column,index )">删除</Button>
            </template>
        </Table>
        <Page :total="total" :page-size="limit" :current="showpage" @on-change="pagechange" style="margin-top:20px;"/>
        <div>
            <Modal
                v-model="modal1"
                :title="changtitle"
                @on-ok="addtwosub"
                :mask-closable="false"
                width="720px">
                <Form ref="formCustom" :model="formCustom"  :label-width="80">
                    <FormItem label="名称" >
                        <Input type="text" v-model="formCustom.Title" />
                    </FormItem>
                    <FormItem label="简介" >
                        <Input type="text" v-model="formCustom.Sumary" />
                    </FormItem>
                    <FormItem label="链接" >
                        <Input type="text" v-model="formCustom.Link" />
                    </FormItem>
                    <FormItem label="图片上传" >
                        <Upload
                            ref="upload"
                            :show-upload-list="false"
                            :on-success="handleSuccess"
                            :format="['jpg','jpeg','png']"
                            :max-size="204800"
                            multiple
                            type="drag"
                            action="/admin/upload"
                            style="display: inline-block;width:58px;">
                            <div style="width: 58px;height:58px;line-height: 58px;">
                                <Icon type="ios-camera" size="20"></Icon>
                            </div>
                        </Upload>
                        <div v-if="formCustom.Picture" class="ishovs" style="position:relatice;vertical-align:top;width:200px;display:inline-block;border:1px solid #ccc;margin-left:10px;">
                            <img :src="formCustom.Picture" style="width:190px;">
                            <div class="demo-upload-list-cover" style="font-">
                                <Icon type="ios-eye-outline" @click.native="handleView()"></Icon>
                                <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
                            </div>
                        </div>
                        <Modal title="View Image" v-model="visible">
                            <img :src="formCustom.Picture" v-if="visible" style="width: 100%">
                        </Modal>
                    </FormItem>
                    <FormItem label="排序">
                        <Input type="text" v-model="formCustom.Sort" />
                    </FormItem>
                    <FormItem label="是否首页显示">
                        <RadioGroup v-model="formCustom.IsIndex">
                            <Radio :label="0">不显示</Radio>
                            <Radio :label="1">显示</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="是否显示">
                        <RadioGroup v-model="formCustom.IsDisplay">
                            <Radio :label="0">不显示</Radio>
                            <Radio :label="1">显示</Radio>
                        </RadioGroup>
                    </FormItem>
                </Form>
            </Modal>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            names:String
        },
        data(){
            return{
                modal1:false,
                changtitle:'添加banner',
                formCustom:{
                    Title:'',
                    Sort:1,
                    IsIndex:1,
                    IsDisplay:1,
                    Picture:'',
                    Link:'',
                    Sumary:''
                },
                columns12: [
                    {
                        title: '名称',
                        key: 'Title'
                    },
                    {
                        title: '排序',
                        key: 'Sort'
                    },
                    {
                        title: '链接',
                        key: 'Link'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
                data6: [
                ],
                visible: false,
                thistype:1,
                total:0,
                showpage:1,
                limit:8
            }
        },
        methods: {
           pagechange(page){
               this.showpage = page;
               this.showlist()
           },
           addbanner(type){
               this.modal1 = true;
               this.thistype=type
               if(type == 1){  //添加
                    this.changtitle='添加banner';
               }else{
                   this.changtitle='修改banner';
               }
           },
           addtwosub(){
               if(this.thistype == 1){
                   this.$axios.post('/admin/banner/addlist',{...this.formCustom}).then(res=>{
                       if(res.data.ret){
                            this.$Notice.success({
                                title: '新增成功'
                            })
                            this.showlist()
                        }else{
                            this.$Notice.success({
                                title: '新增失败'
                            })
                            return false;
                        }
                   })
               }else{
                   this.$axios.post('/admin/banner/update',{...this.formCustom}).then(res=>{
                       if(res.data.ret){
                            this.$Notice.success({
                                title: '修改成功'
                            })
                            this.showlist()
                        }else{
                            this.$Notice.success({
                                title: '修改失败'
                            })
                            return false;
                        }
                   })
               }
           },
           show(row){
               this.modal1 = true;
               this.changtitle='修改banner';
               this.thistype=2
               this.formCustom = row;
           },
           remove(row){
               this.$axios.post('/admin/banner/del',{id:row.id}).then(res=>{
                   if(res.data.ret){
                            this.$Notice.success({
                                title: '删除成功'
                            })
                            this.showlist()
                        }else{
                            this.$Notice.success({
                                title: '删除失败'
                            })
                            return false;
                        }
               })
           },
           handleView () {
                this.visible = true;
            },
            handleRemove () {
                this.formCustom.Picture=''
            },
            handleSuccess (response, file, fileList) {
                this.formCustom.Picture = '/'+response.data.path
                console.log(this.formCustom.Picture)
            },
            showlist(){
                this.$axios.post('/admin/banner/show',{offset:(this.showpage-1)*this.limit,limit:this.limit}).then(res=>{
                    if(res.data.ret){
                        this.data6 = res.data.data;
                        this.total = res.data.total;
                        if(this.total/this.limit <= this.showpage-1){
                            this.showpage=this.showpage-1;
                            this.showlist()
                        }
                    }
                })
            }
        },
        mounted () {
            this.showlist()
        },
        watch: {
            modal1(){
                if(this.modal1){
                    if(this.thistype==1){
                        this.formCustom={
                            Title:'',
                            Sort:1,
                            IsIndex:1,
                            IsDisplay:1,
                            Picture:'',
                            Link:'',
                            Sumary:'',
                        }
                    }
                }
            }
        },
    }
</script>

<style>
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
        text-align:center;
    }
    .ishovs:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 10px;
    }
</style>